<template>
  <div
    id='wrapper'
    v-loading="loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
  >
    <el-row>
      <el-col :xs='24' :sm='24' :lg='24' class='primary'>项目信息表</el-col>
    </el-row>
    <el-row>
      <el-col :xs='24' :sm='24' :lg='24' class='border'></el-col>
    </el-row>
    <el-row class='choose bgColor'>
      <el-col :xs='24' :sm='24' :lg='24' class='filterOption'>
        <span>项目名称</span>
        <el-cascader
            v-model='selectProjectValue'
            :options='projectNameList'
            :props='props'
            collapse-tags
            clearable
            filterable
            :show-all-levels='false'
            :collapse-tags="true"
            placeholder='请选择项目'
            @change='changeProject'
        >
        </el-cascader>
        <el-select
            style='width: 15%;margin-left: 6px;'
            v-model='selectProjectStatusValue'
            placeholder='请选择项目状态'
            clearable
            filterable
            @change='changeProjectStatus'
        >
          <el-option v-for='(item, index) in projectStatus' :key='index' :label='item.label'
                     :value='item.value'></el-option>
        </el-select>
        <el-button @click='getProjectWorkingHour' type='primary' icon="el-icon-search">查询</el-button>
        <el-button @click='exportSelectedProject' type='primary' class='export'>导出Excel表</el-button>
        <el-button @click='authorizationDialogVisible = true' type='primary' v-if='can_authorize'>权限授权</el-button>
      </el-col>
    </el-row>
    <el-dialog
        title="权限授权"
        :visible.sync="authorizationDialogVisible"
        width="40%"
        @close="cleanContent"
        :append-to-body="true"
        >
      <el-tabs type="card">
        <el-tab-pane>
          <span slot="label"><i class="el-icon-s-custom"></i>按部门授权</span>
          <el-form :inline="true" :model="formData" :rules='rules' ref="ruleForm">
            <el-form-item label="部门" prop="bu_id_list">
              <el-cascader
                  :options="bgAndBuTree"
                  v-model="formData.bu_id_list"
                  :props="props"
                  collapse-tags
                  clearable
                  filterable
                  :show-all-levels='false'
                  placeholder='请选择部门'
              />
            </el-form-item>
            <el-form-item label="被授权人" prop="principal_id">
              <el-select
                  v-model="formData.principal_id"
                  filterable
                  clearable
                  remote
                  placeholder="请输入被授权人"
                  :remote-method="remoteMethod"
                  :loading="selectLoading"
              >
                <el-option
                    v-for="user in userList"
                    :key="user.value"
                    :label="user.label"
                    :value="user.id"
                >
                  <span style="float: left">{{ user.label }}</span>
                  <span style="float: right; color: #8492a6; font-size: 13px">{{ user.value }}</span>
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click='addBuAuthorization("ruleForm")'>增加授权</el-button>
            </el-form-item>
          </el-form>
          <el-table
              :data="authorizationData"
              border
              style="width: 100%">
            <el-table-column prop="principal.chinese_name" label="姓名" align='center' width="180" />
            <el-table-column prop="bu.name" align='center' label="部门" />
            <el-table-column label="操作" align='center' width="180">
              <template slot-scope='scope'>
                <el-row>
                  <el-col :xs='24' :sm='24' :lg='24'>
                    <el-button
                        type='danger'
                        size='mini'
                        @click='deleteAuthorization(scope.row)'
                    >
                      删除
                    </el-button>
                  </el-col>
                </el-row>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
              background
              layout="prev, pager, next, sizes, total"
              :page-size.sync="authorizationTableSize"
              :page-sizes="[5, 10]"
              @current-change="authorizationTableCurrentChange"
              @size-change="authorizationTableSizeChange"
              :current-page.sync="authorizationTableCurrent"
              style="text-align: center"
              :total="authorizationDataTotal">
          </el-pagination>
        </el-tab-pane>

        <el-tab-pane>
          <span slot="label"><i class="el-icon-s-platform"></i>按项目授权</span>
          <el-form :inline="true" :model="projectFormData" :rules='projectRules' ref="projectRuleForm">
            <el-form-item label="项目" prop="project_id_list">
              <el-cascader
                  v-model='projectFormData.project_id_list'
                  :options='projectNameList'
                  :props='props'
                  collapse-tags
                  clearable
                  filterable
                  :show-all-levels='false'
                  :collapse-tags="true"
                  placeholder='请选择项目'
              >
              </el-cascader>
            </el-form-item>
            <el-form-item label="被授权人" prop="project_principal_id">
              <el-select
                  v-model="projectFormData.project_principal_id"
                  filterable
                  clearable
                  remote
                  placeholder="请输入被授权人"
                  :remote-method="remoteMethod"
                  :loading="selectLoading"
              >
                <el-option
                    v-for="user in userList"
                    :key="user.value"
                    :label="user.label"
                    :value="user.id"
                >
                  <span style="float: left">{{ user.label }}</span>
                  <span style="float: right; color: #8492a6; font-size: 13px">{{ user.value }}</span>
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click='addProjectAuthorization("projectRuleForm")'>增加授权</el-button>
            </el-form-item>
          </el-form>
          <el-table
              :data="projectAuthorizationData"
              border
              style="width: 100%">
            <el-table-column prop="principal.chinese_name" label="姓名" align='center' width="180" />
            <el-table-column prop="project.project_name" align='center' label="项目" />
            <el-table-column label="操作" align='center' width="180">
              <template slot-scope='scope'>
                <el-row>
                  <el-col :xs='24' :sm='24' :lg='24'>
                    <el-button
                        type='danger'
                        size='mini'
                        @click='deleteProjectAuthorization(scope.row)'
                    >
                      删除
                    </el-button>
                  </el-col>
                </el-row>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
              background
              layout="prev, pager, next, sizes, total"
              :page-size.sync="projectAuthorizationTableSize"
              :page-sizes="[5, 10]"
              @current-change="projectAuthorizationTableCurrentChange"
              @size-change="projectAuthorizationTableSizeChange"
              :current-page.sync="projectAuthorizationTableCurrent"
              style="text-align: center"
              :total="projectAuthorizationDataTotal">
          </el-pagination>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
    <el-table
        class='marT'
        :data='tableData'
        :border='true'
        :header-cell-style="{background:'#eef1f6'}"
        style='width:100%;padding: 20px'>
      <el-table-column align='center' property='project_name' label='项目名称' width='100'></el-table-column>
      <el-table-column align='center' property='project_pm' label='项目经理' width='150'></el-table-column>
      <el-table-column align='center' property='start_date_by_plan' label='计划开始' width='100'></el-table-column>
      <el-table-column align='center' property='end_date_by_plan' label='计划结束' width='150'></el-table-column>
      <el-table-column align='center' property='project_bu' label='所属部门' width='150'></el-table-column>
      <el-table-column align='center' property='actual_number_by_person_month' label='实际(人月)' width='150'></el-table-column>
      <el-table-column align='center' property='total_number_by_person_month_and_plan' label='总计划(人月)' width='150'></el-table-column>
      <el-table-column align='center' property='percent_of_remain_working_hour' label='剩余工时比例' width='150'></el-table-column>
      <el-table-column align='center' property='number_by_person_month_and_plan_and_current' label='当前计划(人月)' width='150'></el-table-column>
      <el-table-column align='center' property='current_plan_deviation' label='当前计划偏差' width='150'></el-table-column>
      <el-table-column align='center' property='absolute_manpower_deviation' label='绝对人月偏差' width='150'></el-table-column>
      <el-table-column align='center' property='project_status' label='状态' width='150'></el-table-column>
      <el-table-column align='center' property='project_setup_process_type' label='立项流程类型' width='150'></el-table-column>
      <el-table-column align='center' property='alert_msg' label='结项提醒' width='150'></el-table-column>
      <el-table-column align='center' property='project_business_type' label='业务类型' width='150'></el-table-column>
      <el-table-column align='center' property='project_business_type_second' label='业务类型细分' width='150'></el-table-column>
      <el-table-column align='center' property='project_level' label='项目级别' width='150'></el-table-column>
      <el-table-column align='center' property='project_information_security_level' label='信息安全级别' width='150'></el-table-column>
    </el-table>
    <el-pagination
        background
        layout="prev, pager, next, sizes, total"
        :page-size="tableSize"
        :page-sizes="[10, 20, 30, 40, 50, 60]"
        @size-change="tableSizeChange"
        @current-change="tableCurrentChange"
        :current-page="tableCurrent"
        style="text-align: center"
        :total="tableTotal">
    </el-pagination>
  </div>
</template>

<script>
import http from '@/views/sys/axios';

export default {
  data() {
    return {
      projectNameList: [],
      tableTotal: 0,
      authorizationDataTotal: 0,
      projectAuthorizationDataTotal: 0,
      tableSize: 10,
      authorizationTableSize: 5,
      projectAuthorizationTableSize: 5,
      tableCurrent: 1,
      authorizationTableCurrent: 1,
      projectAuthorizationTableCurrent: 1,
      isSearch: false,
      authorizationData: [],
      projectAuthorizationData: [],
      selectLoading: false,
      can_authorize: false,
      userList: [],
      bgAndBuTree: [],
      formData: {
        principal_id: '',
        bu_id_list: [],
      },
      projectFormData: {
        project_principal_id: '',
        project_id_list: [],
      },
      projectRules: {
        project_id_list: [
          {
            required: true,
            message: '请选择项目',
            trigger: 'change'
          }
        ],
        project_principal_id: [
          {
            required: true,
            message: '请输入并选择被授权人'
            , trigger: 'change'
          },
        ],
      },
      rules: {
        principal_id: [
          { required: true, message: '请输入并选择被授权人', trigger: 'change' },
        ],
        bu_id_list: [
          { required: true, message: '请选择部门', trigger: 'change' }
        ],
      },
      userMap: {},
      authorizationDialogVisible: false,
      projectStatus: [
        {
          value: '进行中',
          label: '进行中'
        },
        {
          value: '已结项',
          label: '已结项'
        },
        {
          value: '已关闭',
          label: '已关闭'
        },
        {
          value: '研发结项',
          label: '研发结项'
        }
      ],
      selectProjectValue: [],
      selectProjectStatusValue: '',
      tableData: [],
      selectedProjectIds: [],
      props: {
        multiple: true
      },
      loading: false,
    };
  },
  watch: {
    authorizationDialogVisible: function(visible) {
      if (visible) {
        this.getAuthorizationList()
        this.getProjectAuthorizationList()
      }
    },
  },
  methods: {
    async tableSizeChange(val) {
      this.tableSize = val
      if (this.isSearch) {
        const dto = this.getDTO()
        await this.getProjectDataList(dto)
      } else {
        await this.initTable()
      }
    },
    async tableCurrentChange(val) {
      this.tableCurrent = val
      if (this.isSearch) {
        const dto = this.getDTO()
        await this.getProjectDataList(dto)
      } else {
        await this.initTable()
      }
    },
    async authorizationTableCurrentChange(val) {
      await this.getAuthorizationList()
    },
    async projectAuthorizationTableCurrentChange(val) {
      await this.getProjectAuthorizationList()
    },
    async authorizationTableSizeChange(val) {
      await this.getAuthorizationList()
    },
    async projectAuthorizationTableSizeChange(val) {
      await this.getProjectAuthorizationList()
    },
    getDTO() {
      const idList = this.selectedProjectIds;
      // const tmpData = idList.map(item => {
      //   return {
      //     project_name: item
      //   }
      // })
      const DTO = { project_id_list: idList }
      if (this.selectProjectStatusValue) {
        DTO.status = this.selectProjectStatusValue
      }
      // if (tmpData.length) {
      //   DTO.data = tmpData
      // }
      return DTO
    },
    async getProjectWorkingHour() {
      try {
        const idList = this.selectedProjectIds;
        if (idList.length || this.selectProjectStatusValue) {
          this.isSearch = true
          // const tmpData = idList.map(item => {
          //   return {
          //     project_name: item
          //   }
          // })
          const DTO = {}
          DTO.project_id_list = idList
          if (this.selectProjectStatusValue) {
            DTO.status = this.selectProjectStatusValue
          }
          // if (tmpData.length) {
          //   DTO.data = tmpData
          // }
          const success = await this.getProjectDataList(DTO)
          if (success) {
            this.$message.success('查询项目工时成功');
            return
          }
          this.$message.error('查询项目工时失败');
          return
        }
        this.isSearch = false
        await this.initTable()
        this.$message.success('查询项目工时成功');
      } catch (err) {
        throw new Error(err)
      }
    },
    exportSelectedProject() {
      const idList = this.selectedProjectIds;
      // let data = []
      // if (idList.length) {
      //   data = idList.map(item => {
      //     return {
      //       project_name: item
      //     }
      //   })
      // } else {
      //   this.projectNameList.forEach(item => {
      //    const children = item.children
      //    children.forEach(child => data.push({project_name: child.value}))
      //  })
      // }
      // const data = this.tableData.map(item => {
      //   return {
      //     project_name: item.project_name
      //   }
      // })
      const dto = { project_id_list: idList }
      if (this.selectProjectStatusValue) {
        dto.status = this.selectProjectStatusValue
      }
      this.loading = true
      http.post(`/api/base/export_working_hour`,dto, { responseType: 'blob' })
          .then((res) => {
            const { data, code } = res;
            if (code === 200) {
              let blob = new Blob([data], { type: 'application/vnd.ms-excel' })
              const link = document.createElement('a');
              link.style.display = 'none';
              link.href = URL.createObjectURL(blob);
              link.setAttribute('download', '项目信息表.xlsx');
              document.body.appendChild(link);
              link.click();
              URL.revokeObjectURL(link.href);
              document.body.removeChild(link);
              this.$message.success('导出成功!');
            } else {
              this.$message.error('下载出错了!');
            }
            this.loading = false
          })
          .catch((err) => {
            const { data } = err;
            if (data) {
              let blob = new Blob([data], { type: 'application/vnd.ms-excel' });
              const link = document.createElement('a');
              link.style.display = 'none';
              link.href = URL.createObjectURL(blob);
              link.setAttribute('download', '项目信息表.xlsx');
              document.body.appendChild(link);
              link.click();
              URL.revokeObjectURL(link.href);
              document.body.removeChild(link);
              this.$message.success('导出成功!');
            } else {
              this.$message.error('下载出错了!');
            }
            this.loading = false
          })
    },
    changeProject(val){
      this.selectedProjectIds = this.selectProjectValue.map(item => item[item.length - 1])
    },
    changeProjectStatus(value) {
    },
    getProjectData(data={}) {
      //Todo 获取查询时工时表数据
      const params = {
        page_number: this.tableSize,
        current_page: this.tableCurrent
      }
      const newData = Object.assign(data, params)
      return http.post(`/api/base/project_list_for_working_hour`, newData)
    },
    getInitialProjectData() {
      //Todo 获取页面加载时工时表数据
      const params = {
        page_number: this.tableSize,
        current_page: this.tableCurrent
      }
      return http.get(`/api/base/project_list_for_working_hour`, {params})
    },
    getProjectNameData() {
      //Todo 获取项目名称数据
      return http.get(`/api/base/project_name_list_for_working_hour`)
    },

    buOnChange(val) {
      console.log('buOnChange', val, this.formData.buIdList);
    },

    getAuthorizationAPI() {
      //Todo 获取当前用户已授权的人员信息
      const params = {
        page: this.authorizationTableCurrent,
        size: this.authorizationTableSize
      }
      return http.get(`/api/base/authorize_bu_permission`, { params })
    },

    addAuthorizationAPI(formData) {
      return http.post(`/api/base/authorize_bu_permission`, formData)
    },

    deleteAuthorizationAPI(data) {
      return http.delete(`/api/base/authorize_bu_permission`, { data })
    },

    getProjectAuthorizationAPI() {
      //Todo 获取当前用户根据项目已授权的人员信息
      const params = {
        page: this.projectAuthorizationTableCurrent,
        size: this.projectAuthorizationTableSize
      }
      return http.get(`/api/base/authorize_project_permission`, { params })
    },

    addProjectAuthorizationAPI(formData) {
      return http.post(`/api/base/authorize_project_permission`, formData)
    },

    deleteProjectAuthorizationAPI(data) {
      return http.delete(`/api/base/authorize_project_permission`, { data })
    },

    getBgAndBuTreeAPI() {
      return http.get(`/api/base/bg_bu_tree_list`)
    },

    async deleteAuthorization(row) {
      try {
        const data = {
          authorization_id: row.id
        }
        const { success, msg } = await this.deleteAuthorizationAPI(data)
        if (success) {
          this.$message.success(msg)
          await this.getAuthorizationList()
        } else {
          this.$message.error(msg)
        }
      } catch (e) {
        throw new Error(e)
      }
    },

    async deleteProjectAuthorization(row) {
      try {
        const data = {
          authorization_id: row.id
        }
        const { success, msg } = await this.deleteProjectAuthorizationAPI(data)
        if (success) {
          this.$message.success(msg)
          await this.getProjectAuthorizationList()
        } else {
          this.$message.error(msg)
        }
      } catch (e) {
        throw new Error(e)
      }
    },

    async getBgAndBuTree() {
      try {
        const { success, data } = await this.getBgAndBuTreeAPI()
        if (success) {
          const { project_bg_bu_map, can_authorize } = data
          this.bgAndBuTree = project_bg_bu_map
          this.can_authorize = can_authorize
        }
      } catch (e) {
        throw new Error(e)
      }
    },

    async getAuthorizationList() {
      try {
        const { success, count, data, msg } = await this.getAuthorizationAPI()
        if (success) {
          this.authorizationDataTotal = count
          this.authorizationData = data
        } else {
          this.$message.error(msg)
        }
      } catch (e) {
        throw new Error(e)
      }
    },

    async getProjectAuthorizationList() {
      try {
        const { success, count, data, msg } = await this.getProjectAuthorizationAPI()
        if (success) {
          this.projectAuthorizationDataTotal = count
          this.projectAuthorizationData = data
        } else {
          this.$message.error(msg)
        }
      } catch (e) {
        throw new Error(e)
      }
    },

    async getProjectNameList() {
      try {
        const { code, data } = await this.getProjectNameData()
        if (code === 200) {
          if (data) {
            // this.projectNameList = Object.keys(data).map(key => {
            //   const children = data[key].map(item => {
            //     return {
            //       value: item.project_name,
            //       label: item.project_name,
            //     }
            //   })
            //   return {
            //     value: key,
            //     label: key,
            //     children,
            //   }
            // })
            this.projectNameList = Object.keys(data).map(key => data[key])
            return true
          }
          return false
        }
        return false
      } catch (err) {
        return false
      }
    },
    async getProjectDataList(dto={}) {
      try {
        const { code, data, count } = await this.getProjectData(dto)
        if (code === 200) {
          this.tableData = Object.keys(data).map(key => data[key])
          this.tableTotal = count
          return true
        }
      } catch (err) {
        return false
      }
    },
    async initTable() {
      try {
        const { code, data, count } = await this.getInitialProjectData()
        if (code === 200) {
          this.tableData = Object.keys(data).map(key => data[key])
          this.tableTotal = count
        }
      } catch (err) {
        throw new Error(err)
      }
    },

    remoteMethod(query) {
      if (query !== '') {
        this.selectLoading = true;
        this.userList = []
        this.handleUserListResult(query)
      } else {
        this.userList = []
      }
    },

    addBuAuthorization(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          const dto = {
            bu_id_list: this.formData.bu_id_list.map(item => item[1]),
            principal_id: this.formData.principal_id
          }
          const { success, data, msg } = await this.addAuthorizationAPI(dto)
          if (success) {
            const { created_list, authorized_list } = data
            if (created_list.length) {
              const successMessage = created_list.map(authorization => `<span>${authorization.principal.chinese_name}已添加${authorization.bu.name}权限</span>`).join(`<br/>`)
              await this.$notify.success({
                title: '授权成功',
                dangerouslyUseHTMLString: true,
                message: successMessage,
              })
            }
            if (authorized_list.length) {
              const message = authorized_list.map(authorization => `<span>${authorization.principal.chinese_name}已有${authorization.bu.name}权限</span>`).join(`<br/>`)
              await this.$notify.warning({
                title: '授权失败',
                dangerouslyUseHTMLString: true,
                message
              })
            }

            this.$refs.ruleForm.resetFields()
            await this.getAuthorizationList()
          } else {
            this.$message.error(msg)
            this.$refs.ruleForm.resetFields()
          }
        } else {
          return false;
        }
      });
    },

    addProjectAuthorization(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          const dto = {
            project_id_list: this.projectFormData.project_id_list.map(item => item[1]),
            project_principal_id: this.projectFormData.project_principal_id
          }
          const { success, data, msg } = await this.addProjectAuthorizationAPI(dto)
          if (success) {
            const { created_list, authorized_list } = data
            if (created_list.length) {
              const successMessage = created_list.map(authorization => `<span>${authorization.principal.chinese_name}已添加${authorization.project.project_name}权限</span>`).join(`<br/>`)
              await this.$notify.success({
                title: '授权成功',
                dangerouslyUseHTMLString: true,
                message: successMessage,
              })
            }
            if (authorized_list.length) {
              const message = authorized_list.map(authorization => `<span>${authorization.principal.chinese_name}已有${authorization.project.project_name}权限</span>`).join(`<br/>`)
              await this.$notify.warning({
                title: '授权失败',
                dangerouslyUseHTMLString: true,
                message
              })
            }

            this.$refs.projectRuleForm.resetFields()
            await this.getProjectAuthorizationList()
          } else {
            this.$message.error(msg)
            this.$refs.projectRuleForm.resetFields()
          }
        } else {
          return false;
        }
      })
    },

    cleanContent() {
      this.$refs.ruleForm.resetFields()
      this.$refs.projectRuleForm.resetFields()
    },

    getUserList(query) {
      return http.get(`/api/account/user/query?name=${query}`)
    },

    async handleUserListResult(query) {
      try {
        const { code, user_list } = await this.getUserList(query)
        if(code === 200) {
          this.selectLoading = false
          this.userList = user_list
          user_list.forEach(user => {
            this.userMap[user.value] = {
              id: user.id,
              username: user.value,
              chinese_name: user.label,
            }
          })
        }
      } catch (err) {
        throw new Error(err)
      }
    },

  },
  mounted() {
    this.getProjectNameList()
    this.initTable()
    this.getBgAndBuTree()
  },

};
</script>

<style scoped lang='scss'>
@import '../../assets/common/common.scss';

/deep/ .el-table th.gutter {
  display: table-cell !important;
}

///deep/ .el-dialog {
//  background-color: #eeeeee;
//}

/deep/ .el-divider__text {
  color: #ffffff;
  font-size: 20px;
  font-weight: 600;
  background-color: #e6a23c;
  padding: 6px 16px;
}

/deep/ .el-divider--horizontal {
  margin: 40px 0;
  height: 2px;
}

#wrapper {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;
}

.box {
  display: flex;

  div {
    margin: auto;
  }
}

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}

.fade-enter, .fade-leave-to {
  opacity: 0;
}

.toTop {
  position: fixed;
  bottom: 80px;
  right: 25px;
  z-index: 10;
}

.details {
  color: #1890ff;
  text-decoration: underline;
  cursor: pointer;
}

.choose {
  padding: 20px 0;

  .flex-box {
    display: flex;
    flex-wrap: nowrap;

    .flexEl {
      flex: 1;
      margin: auto;
    }

    .text-align {
      text-align: center;
    }

    .el {
      flex: 0 0 90%;
    }
  }

  .time {
    position: absolute;
    top: 20px;
    right: 41%;
    font-size: 14px;
    color: #606266;
  }

  .export {
    position: absolute;
    top: 20px;
    right: 20px;
  }

  .filterOption {
    margin-left: 1.7%;
  }
}

.border {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
  margin-top: 1rem;
  margin-bottom: 1rem;
  border: 0;
  border-top: 1px solid rgba(0, 0, 0, .1);
}

.primary {
  color: #409EFF;
  font-size: 30px;
  margin-top: 20px;
  margin-bottom: 10px;
  font-weight: 400;
}

.bgColor {
  background: #fff;
}

.pad {
  padding: 0 20px;
  padding-top: 20px;
}

.marT {
  margin-top: 20px;
}

.btn-group {
  text-align: right;
}

.mar {
  margin: 0 20px;
  margin-top: 20px;
}

.table {
  padding-bottom: 10px;
}
</style>
